<at-panel>
    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>

    <at-tab-group class="at-TabGroup--padBelow">
        <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
        <at-tab state="vm.tab.instances">{{:: vm.strings.get('tab.INSTANCES') }}</at-tab>
        <at-tab state="vm.tab.jobs" ng-hide="$state.current.name === 'instanceGroups.add'">{{:: vm.strings.get('tab.JOBS') }}</at-tab>
    </at-tab-group>

    <at-panel-body>
        <div class="at-List-toolbar">
            <smart-search
                class="at-List-search"
                django-model="instances"
                base-path="{{vm.list.basePath}}"
                iterator="instance"
                list="vm.list"
                collection="vm.instances"
                dataset="vm.instance_dataset"
                search-tags="vm.searchTags">
            </smart-search>

            <div class="at-List-toolbarAction">
                <button
                    aria-label="{{:: vm.strings.get('instance.ADD') }}"
                    type="button"
                    ng-click= "vm.addInstances()"
                    class="at-Button--add"
                    id="button-add"
                    ng-show="vm.isSuperuser"
                    aw-tool-tip="{{vm.tooltips.add}}"
                    data-placement="top"
                    aria-expanded="false">
                </button>
                <div ui-view="modal"></div>
            </div>
        </div>
        <at-list-toolbar
            ng-if="vm.instances.length > 0"
            sort-only="true"
            sort-value="vm.toolbarSortValue"
            sort-options="vm.toolbarSortOptions"
            on-sort="vm.onToolbarSort">
        </at-list-toolbar>
        <at-list results='vm.instances'>
            <at-row ng-repeat="instance in vm.instances"
                ng-class="{'at-Row--active': (instance.id === vm.activeId)}"
                class="at-Row--instances">
                <div class="at-Row-toggle">
                    <at-switch on-toggle="vm.toggle(instance)" switch-on="instance.enabled" switch-disabled="vm.rowAction.toggle._disabled"></at-switch>
                </div>
                <div class="at-Row-itemGroup">
                    <div class="at-Row-items at-Row-items--instances">
                        <at-row-item
                            header-value="{{ instance.hostname }}"
                            header-tag="{{ instance.managed_by_policy ? '' : vm.strings.get('list.MANUAL') }}">
                        </at-row-item>
                        <div class="at-Row-nonHeaderItems">
                            <at-row-item
                                label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RUNNING_JOBS') }}"
                                label-state="instanceGroups.instanceJobs({instance_group_id: {{vm.instance_group_id}}, instance_id: {{instance.id}}, job_search: {status__in: ['running,waiting']}})"
                                value="{{ instance.jobs_running }}"
                                inline="true"
                                badge="true">
                            </at-row-item>
                            <at-row-item
                                label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_TOTAL_JOBS') }}"
                                label-state="instanceGroups.instanceJobs({instance_group_id: {{vm.instance_group_id}}, instance_id: {{instance.id}}})"
                                value="{{ instance.jobs_total }}"
                                inline="true"
                                badge="true">
                            </at-row-item>
                        </div>
                    </div>
                    <div class="at-Row-items--capacity">
                        <capacity-adjuster
                            state="instance"
                            disabled="{{vm.rowAction.capacity_adjustment._disabled}}">
                        </capacity-adjuster>
                        <capacity-bar
                            label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_USED_CAPACITY') }}"
                            capacity="instance.consumed_capacity"
                            total-capacity="instance.capacity">
                        </capacity-bar>
                    </div>
                </div>
            </at-row>
        </at-list>
    </at-panel-body>
    <paginate
        collection="vm.instances"
        dataset="vm.instance_dataset"
        iterator="instance"
        base-path="{{vm.list.basePath}}">
    </paginate>
</at-panel>
